<template>
  <div v-loading="loading">
  <NoData v-if="count===0" :tip="tip" />
  <div class="masonry">
    <div class="item" v-for="(item,index) in info" :key="index">
      <el-card shadow="hover" :body-style="{ padding: '0px' }">
        <img :src="item.images" v-preview="item.images" alt="" class="album-images">
      </el-card>
    </div>
  </div>

  <!--底部分页-->
  <div class="album-bottom-pagination">
    <el-pagination
      class="album-pages"
      background
      layout="prev, pager, next"
      :total="count"
      v-if="count"
      @current-change="changePage"
      :page-size="12">
    </el-pagination>
  </div>
  </div>
</template>

<script>
  import {getAlbum} from "../../api/article";
  import NoData from '../../components/noData'

  export default {
        name: "index",
        data(){
            return{
              page:1,
              info:{},
              count:0,
              loading:false,
              tip:'你目前还没有任何图片哦',
            }
        },
        components:{
          NoData
        },
        created(){
          this.loading=true;
          this.getAlbumList(this.page);
        },
        methods:{
          getAlbumList(now){
            getAlbum('?page=' + now).then(res=>{
              console.log(res.data);
              this.info=res.data.results;
              this.count=res.data.count;
              this.loading=false;
            }).catch(error=>{
              console.log(error.data);
              this.loading=false;
            })
          },
          changePage(now){
            this.loading=true;
            this.getAlbumList(now);
          },
        }
    }
</script>

<style lang="stylus" scoped>
  @import "../../stylus/color.styl"


  .masonry {
    column-count: 4;
    column-gap: 0;
  }
  @media screen and (max-width: 500px) {
    .masonry {
      column-count: 2;
      column-gap: 0;
    }
  }
  @media screen and (max-width: 1100px) {
    .masonry {
      column-count: 3;
      column-gap: 0;
    }
  }
  .item {
    break-inside: avoid;
    box-sizing: border-box;
    padding: 5px;
  }
  .album-images{
    width 100%
    cursor zoom-in
    height auto
  }
  .album-bottom-pagination{
    margin 20px 0 40px 0
    text-align right
  }
  .album-pages{
    margin-top 20px
    margin-bottom 30px
  }
</style>
